<!--
 * @Autor: dingxiaolin
 * @Date: 2021-06-02 14:33:43
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-07-26 14:28:11
-->
<template>
    <companyInfo>
        <template #login>
            <div class="main">
                <a-form id="formLogin" class="user-layout-login" ref="formRef" :model="form">
                    <a-tabs :activeKey="customActiveKey" :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }" @change="handleTabClick">
                        <a-tab-pane key="tab1" tab="账号密码登录">
                            <a-form-item name="account" :rules="[{ required: true, message: '请输入帐户名', trigger: 'change' }]">
                                <a-input
                                    size="large"
                                    type="text"
                                    placeholder="账号"
                                    :maxLength="45"
                                    v-model:value="form.account"
                                    autoComplete="new-password"
                                >
                                    <template #prefix>
                                        <UserOutlined type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
                                    </template>
                                </a-input>
                            </a-form-item>
                            <a-form-item name="password" :rules="[{ required: true, message: '请输入密码', trigger: 'change' }]">
                                <a-input-password
                                    size="large"
                                    :maxLength="45"
                                    placeholder="密码"
                                    v-model:value="form.password"
                                    autoComplete="new-password"
                                >
                                    <template #prefix>
                                        <LockOutlined type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
                                    </template>
                                </a-input-password>
                            </a-form-item>
                            <a-row :gutter="24">
                                <a-col :span="16">
                                    <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码', trigger: 'change' }]">
                                        <a-input size="large" type="text" :maxLength="5" placeholder="验证码" v-model:value="form.code">
                                            <template #prefix>
                                                <SafetyCertificateOutlined type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
                                            </template>
                                        </a-input>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="8">
                                    <img @click.stop.prevent="getCaptchaImg" class="getCaptcha" :src="CaptchaImg" />
                                </a-col>
                            </a-row>
                        </a-tab-pane>
                    </a-tabs>
                    <div style="margin-top: 24px">
                        <a-button
                            size="large"
                            type="primary"
                            htmlType="submit"
                            class="login-button"
                            :loading="loginState.loginBtn"
                            :disabled="loginState.loginBtn"
                            @click.prevent="handleSubmit"
                            >确定</a-button
                        >
                    </div>
                </a-form>
            </div>
        </template>
    </companyInfo>
</template>
<script lang="ts">
import { defineComponent, PropType, reactive, toRefs, ref, computed, toRaw, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import companyInfo from './companyInfo.vue'
import { Row, Col } from 'ant-design-vue'
// import { UserOutlined, LockOutlined, SafetyCertificateOutlined } from '@ant-design/icons-vue'
import { formRules } from '@/utils/validator'
import { useStore } from '@/store'
import { getImgCaptcha } from '@/api/system/user'
interface FormState {
    account: string
    password: string
    code: string
    tenantId: string
    grantType: string
    key: string
    loginLimit: string
    userType: string
}
export default defineComponent({
    name: 'login',
    components: {
        companyInfo,
        // UserOutlined,
        // LockOutlined,
        // SafetyCertificateOutlined,
        [Row.name]: Row,
        [Col.name]: Col
    },
    props: {},
    emits: [],

    setup(props, ctx) {
        const store = useStore()
        const router = useRouter()
        const formRef = ref<any>(null)
        const state = reactive({
            form: {
                account: '',
                password: '',
                code: '',
                tenantId: '000000',
                grantType: '',
                key: '',
                loginLimit: 'ven_level0,ven_level1',
                userType: ''
            } as FormState,
            customActiveKey: 'tab1',
            isLoginError: false,
            requiredTwoStepCaptcha: false,
            stepCaptchaVisible: false,
            loginState: {
                time: 60,
                loginBtn: false,
                smsSendBtn: false
            },
            accountLoginErrMsg: '',
            CaptchaImg: ''
        })
        onMounted(() => {
            getCaptchaImg()
            if (store.state.app.color) {
                ;(window as any).less.modifyVars({
                    '@primary-color': store.state.app.color
                })
            }
        })
        computed(() => {})
        /**
         * 获取验证码
         */
        function getCaptchaImg() {
            let dataJson = { grantType: 'password', userType: 'app' }
            getImgCaptcha(dataJson).then((res) => {
                state.CaptchaImg = res.code
                state.form.grantType = res.grantType
                state.form.key = res.key
                state.form.userType = res.userType
            })
        }
        function handleTabClick(key) {
            state.isLoginError = false
            state.customActiveKey = key
        }
        function handleSubmit() {
            const { loginState, customActiveKey } = state
            loginState.loginBtn = true
            formRef.value
                .validate()
                .then(() => {
                    store.dispatch('user/login', state.form)
                    loginState.loginBtn = false
                })
                .catch((err) => {
                    setTimeout(() => {
                        loginState.loginBtn = false
                    }, 600)
                })
        }
        return {
            ...toRefs(state),
            formRef,
            handleTabClick,
            formRules,
            handleSubmit,
            getCaptchaImg
        }
    }
})
</script>

<style lang="scss" scoped>
.user-layout-login {
    label {
        font-size: 14px;
    }

    .getCaptcha {
        display: block;
        width: 100%;
        height: 40px;
        cursor: pointer;
    }

    .forge-password {
        font-size: 14px;
    }

    button.login-button {
        padding: 0 15px;
        font-size: 16px;
        height: 40px;
        width: 100%;
    }

    .user-login-other {
        text-align: left;
        margin-top: 24px;
        line-height: 22px;

        .item-icon {
            font-size: 24px;
            color: rgba(0, 0, 0, 0.2);
            margin-left: 16px;
            vertical-align: middle;
            cursor: pointer;
            transition: color 0.3s;

            &:hover {
                color: #1890ff;
            }
        }

        .register {
            float: right;
        }
    }
}
.main {
    min-width: 260px;
    width: 368px;
    margin: 0 auto;
}
:deep(.ant-col) {
    width: 100%;
}
</style>
